<template>
  <el-dialog
    title="异常热清洗申请"
    :visible.sync="show"
    fullscreen
    :before-close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
      <el-form-item label="井号" prop="expapp_wellname">
        <el-col :span="5">
          <el-input
            v-model="form.expapp_wellname"
            filterable
            placeholder="请输入井号"
            :readonly="readonly"
            :disabled="disabled"
            @blur="changeWellname"
          />
        </el-col>
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item label="申请单位" prop="expapp_areano">
            <el-select v-model="form.expapp_areano" placeholder="请选择单位">
            <el-option
              v-for="(item, i) in opeArea"
              :key="i"
              :label="item"
              :value="item"
            />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="最后一次检泵时间" prop="expapp_lastinspectdata">
            <el-date-picker
              v-model="form.expapp_lastinspectdata"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="test01" style="margin: 25px 0">
        <el-row>
          <el-col :span="8">
            <el-form-item label="正常生产日期" prop="">
              <el-date-picker
                v-model="form.date1"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :readonly="readonly"
                :disabled="disabled"
                @blur="changeDate"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="异常生产日期" prop="">
              <el-date-picker
                v-model="form.date2"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :readonly="readonly"
                :disabled="disabled"
                @blur="changeDate"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="正常日产液量（T）"
              prop="expapp_normaldailyliquid"
            >
              <el-input
                v-model="form.expapp_normaldailyliquid"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="异常日产液量（T）"
              prop="expapp_expdailyliquid"
            >
              <el-input
                v-model="form.expapp_expdailyliquid"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              label="正常含水率（%）"
              prop="expapp_normalwatercontent"
            >
              <el-input
                v-model="form.expapp_normalwatercontent"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="异常含水率（%）" prop="expapp_expwatercontent">
              <el-input
                v-model="form.expapp_expwatercontent"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              label="正常沉没度（m）"
              prop="expapp_normalsunkenness"
            >
              <el-input
                v-model="form.expapp_normalsunkenness"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="异常沉没度（m）" prop="expapp_expsunkenness">
              <el-input
                v-model="form.expapp_expsunkenness"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="正常泵况" prop="expapp_normalpumpcondition">
              <el-input
                v-model="form.expapp_normalpumpcondition"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="异常泵况" prop="expapp_exppumpcondition">
              <el-input
                v-model="form.expapp_exppumpcondition"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入内容"
                style="width: 202px"
                :readonly="readonly"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-form-item label="诊断原因" prop="expapp_sitecheck">
        <el-input
          v-model="form.expapp_sitecheck"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          placeholder="请输入内容"
          style="width: 55%"
          :readonly="readonly"
          :disabled="disabled"
        />
      </el-form-item>

      <el-row>
        <el-col :span="8">
          <el-form-item label="用液量（m3）" prop="expapp_amountofliquid">
            <el-input
              v-model="form.expapp_amountofliquid"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实施时间" prop="expapp_plandate">
            <el-date-picker
              v-model="form.expapp_plandate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="前置量（m3）" prop="expapp_preload">
            <el-input
              v-model="form.expapp_preload"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度上限（℃）" prop="expapp_preloadupperlimit">
            <el-input
              v-model="form.expapp_preloadupperlimit"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度下限（℃）" prop="expapp_preloadlowlimit">
            <el-input
              v-model="form.expapp_preloadlowlimit"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="热洗量（m3）" prop="expapp_hotwashload">
            <el-input
              v-model="form.expapp_hotwashload"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度上限（℃）" prop="expapp_hotwashupperlimit">
            <el-input
              v-model="form.expapp_hotwashupperlimit"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度下限（℃）" prop="expapp_hotwashlowlimit">
            <el-input
              v-model="form.expapp_hotwashlowlimit"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="顶替量（m3）" prop="expapp_replaceload">
            <el-input
              v-model="form.expapp_replaceload"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="温度上限（℃）"
            prop="expapp_replaceloadupperlimit"
          >
            <el-input
              v-model="form.expapp_replaceloadupperlimit"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度下限（℃）" prop="expapp_replaceloadlowlimit">
            <el-input
              v-model="form.expapp_replaceloadlowlimit"
              placeholder="请输入内容"
              style="width: 202px"
              :readonly="readonly"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        v-if="
          $store.state.user.userInfo.userType == '2' ||
          $store.state.user.userInfo.userType == '4' ||
          readonly == true
        "
        :gutter="20"
      >
        <el-col :span="12">
          <el-form-item label="作业区审批状态" prop="expapp_areastate">
            <el-select
              v-model="form.expapp_areastate"
              clearable
              placeholder="请选择审批状态"
              style="width: 100%"
            >
              <el-option label="作业区未审批" value="0" />
              <el-option label="作业区审批未通过" value="1" />
              <el-option label="作业区审批通过" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业区审批意见" prop="expapp_approvalcomment">
            <el-input
              v-model="form.expapp_approvalcomment"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              :readonly="readonly"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        v-if="
          $store.state.user.userInfo.userType == '3' ||
          $store.state.user.userInfo.userType == '4' ||
          readonly == true
        "
        :gutter="20"
      >
        <el-col :span="12">
          <el-form-item label="工艺所审批状态" prop="expapp_creaftstate">
            <el-select
              v-model="form.expapp_creaftstate"
              clearable
              placeholder="请选择审批状态"
              :readonly="readonly"
              style="width: 100%"
            >
              <el-option label="工艺所未审批" value="0" />
              <el-option label="工艺所审批未通过" value="1" />
              <el-option label="工艺所审批通过" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工艺所审批意见" prop="expapp_craftopinoin">
            <el-input
              v-model="form.expapp_craftopinoin"
              type="textarea"
              :rows="2"
              :readonly="readonly"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :disabled="readonly" @click="submit"
        >提 交</el-button
      >
      <el-button
        type="primary"
        :disabled="readonly"
        @click="submit1"
        v-if="$store.state.user.userInfo.userType == '4' && !readonly"
        >作业区审批</el-button
      >
      <el-button
        type="primary"
        :disabled="readonly"
        @click="submit2"
        v-if="$store.state.user.userInfo.userType == '4' && !readonly"
        >工艺所审批</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: Boolean,
    readonly: Boolean,
    form: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        expapp_wellname: {
          required: true,
          message: '请输入必填项',
          trigger: 'blur'
        }
      },
      opeArea: ['第一采油作业区','第二采油作业区', '第三采油作业区','第五采油作业区','第七采油作业区','第八采油作业区','第九采油作业区','运行维护一中心'],
      isEdit: false,
      disabled: false
    }
  },
  computed: {
    show: {
      get() {
        return this.showDialog
      },
      set(value) {
        this.$emit('update:showDialog', value)
      }
    }
  },
  watch: {
    form: {
      handler: function (val) {
        if (this.$store.state.user.userInfo.userType != '1') {
          this.disabled = true
        }
        if (this.$store.state.user.userInfo.userType == '4') {
          this.disabled = false
        }
        if (val.expapp_id) {
          this.isEdit = true
        } else {
          this.isEdit = false
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            if (this.$store.state.user.userInfo.userType == '3') {
              this.$http
                .post('/expHotwashapplica/craftApproval', this.form)
                .then(() => {
                  this.$message.success('编辑成功')
                  this.close()
                })
                .catch((err) => {
                  this.$message.error(err)
                  this.close()
                })
            } else if (this.$store.state.user.userInfo.userType == '2') {
              this.$http
                .post('/expHotwashapplica/areaApproval', this.form)
                .then(() => {
                  this.$message.success('编辑成功')
                  this.close()
                })
                .catch((err) => {
                  this.$message.error(err)
                  this.close()
                })
            } else {
              this.$http
                .post('/expHotwashapplica/update', this.form)
                .then(() => {
                  this.$message.success('编辑成功')
                  this.close()
                })
                .catch((err) => {
                  this.$message.error(err)
                  this.close()
                })
            }
          } else {
            this.$http
              .post('/expHotwashapplica/add', this.form)
              .then(() => {
                console.log('这是普通提交按钮')
                this.$message.success('提交成功')
                this.close()
              })
              .catch((err) => {
                this.$message.error(err)
                this.close()
              })
          }
        }
      })
    },
    close() {
      this.show = false
    },
    changeWellname() {
      this.$refs.form.validateField('expapp_wellname', (valid) => {
        if (!valid) {
          this.$http
            .post('/expHotwashapplica/queryLastCheckDateAndArea', {
              wellId: this.form.expapp_wellname
            })
            .then(({ data: { data: res } }) => {
              this.form.expapp_areano = res[0]
              this.form.expapp_lastinspectdata = res[1]
            })
        }
      })
    },
    changeDate() {
      if (
        (this.form.date1 || this.form.expapp_applicationdata) &&
        this.form.expapp_wellname
      ) {
        this.$http
          .post('/expHotwashapplica/querySubmergence', {
            wellId: this.form.expapp_wellname,
            date: this.form.date1 || this.form.expapp_applicationdata
          })
          .then(({ data: { data: res } }) => {
            if (this.form.date1) {
              this.form.expapp_normalwatercontent = res[0]
              this.form.expapp_normaldailyliquid = res[1]
              this.form.expapp_normalpumpcondition = res[2]
              this.form.expapp_normalsunkenness = res[3]
            } else {
              this.form.expapp_expwatercontent = res[0]
              this.form.expapp_expdailyliquid = res[1]
              this.form.expapp_exppumpcondition = res[2]
              this.form.expapp_expsunkenness = res[3]
            }
          })
      }
    },
    submit1() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http
            .post('/expHotwashapplica/areaApproval', this.form)
            .then(() => {
              this.$message.success('编辑成功')
              this.close()
            })
            .catch((err) => {
              this.$message.error(err)
              this.close()
            })
        }
      })
    },
    submit2() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http
            .post('/expHotwashapplica/craftApproval', this.form)
            .then(() => {
              this.$message.success('编辑成功')
              this.close()
            })
            .catch((err) => {
              this.$message.error(err)
              this.close()
            })
        }
      })
    }
  }
}
</script>

<style>
</style>
